<template>
  <div class="recommed">
    <scroll class="recommend-content" :data="disclist" ref="scroll">
        <div>
          <recommend-swiper :swiperSlides="recommends"></recommend-swiper>
          <div class="recommend-list">
            <h3 class="recommend-title">热门歌曲推荐</h3>
            <ul>
              <li class="item" v-for="(item,index) of disclist" :key="index" @click="handleSelect(item)">
                <div class="item-left">
                  <img v-lazy="item.imgurl" alt="">
                </div>
                <div class="item-right">
                  <h3>{{item.creator.name}}</h3>
                  <p>{{item.dissname}}</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="load-img" v-if="!disclist.length">
            <loading></loading>
          </div>
        </div>
    </scroll>
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import { getRecommend, getDiscList } from 'api/recommend'
import {ERR_OK} from 'api/config'
import RecommendSwiper from 'base/swiper/swiper'
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
import {playlistMixin} from 'common/js/mixin'
import {mapMutations} from 'vuex'
export default {
  name: 'Recommend',
  mixins: [playlistMixin],
  data () {
    return {
      recommends: [],
      disclist: []
    }
  },
  mounted () {
    this._getRecommend()
    this._getDiscList()
  },
  methods: {
    handleSelect (item) {
      this.$router.push({path: `/recommend/${item.dissid}`})
      this.setDisc(item)
      // console.log(item)
    },
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '120px' : ''
      this.$refs.scroll.$el.style.bottom = bottom
      this.$refs.scroll.refresh()
    },
    _getRecommend () {
      getRecommend()
        .then(res => {
          if (res.code === ERR_OK) {
            this.recommends = res.data.slider
          }
        })
    },
    _getDiscList () {
      getDiscList()
        .then((res) => {
          if (res.code === ERR_OK) {
            this.disclist = res.data.list
          }
        })
    },
    ...mapMutations({
      setDisc: 'SET_DISC'
    })
  },
  components: {
    RecommendSwiper,
    Scroll,
    Loading
  }
}
</script>
<style lang="scss" scoped>
@import 'common/scss/variable.scss';
.recommed{
  .recommend-content{
    overflow: hidden;
    position: absolute;
    top: 2.2rem;
    bottom: 0;
    right: 0;
    left: 0;
    .recommend-list{
      margin-top: 0.42rem;
      .recommend-title{
        text-align: center;
        font-size: 0.24rem;
        color: $color-theme;
        margin-top: 0.32rem;
      }
      ul{
        .item{
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 0.24rem 0 0.24rem 0.62rem;
          box-sizing: border-box;
          .item-left{
            img{
              width: 1rem;
              height: 1rem;
              vertical-align: bottom;
            }
          }
          .item-right{
            margin-left: 0.32rem;
            flex: 1;
            h3{
              display: flex;
              flex-direction: column;
              justify-content: center;
              line-height: 0.32rem;
              font-size: $font-size-medium-x;
              color: $color-text;
            }
            p{
              font-size: $font-size-medium;
              color: $color-text-d;
              left: 0.32rem;
              margin-top: 0.24rem;

            }
          }
        }
      }
    }
  }
  .load-img{
    width: 100%;
  }
}
.slide-enter-active,.slide-leave-active{
  transition: all 0.3s;
}
.slide-enter,.slide-leave-to{
  transform: translateX(100%);
}
</style>
